<template>
  <el-progress
    :percentage="config.value"
    :stroke-width="config.strokeWidth"
    :color="config.customColors"
    :text-inside="config.textInside"
    :format="getformatter"
    :type="type"
  ></el-progress>
</template>
<script>
import { number } from "echarts";
export default {
  computed: {
    config: function() {
      return {
        value: this.info.value,
        strokeWidth: this.strokeWidth,
        customColors: [
          { color: "rgba(243, 72, 54)", percentage: 60 },
          { color: "rgba(255, 207, 0)", percentage: 85 },
          { color: "rgba(129, 210, 30)", percentage: 95 },
        ],
        title: this.info.title,
        textInside: this.textInside,
      };
    },
  },
  methods: {
    getformatter() {
      return `${this.config.title}:${this.config.value}`;
    },
  },
  props: {
    info: {
      type: Object,
      default: function() {
        return {
          value: 18.5,
          title: "综合分值",
        };
      },
    },
    type: {
      type: String,
      default: "line",
    },
    strokeWidth: {
      type: Number,
      default: 26,
    },
    textInside: {
      type: Boolean,
      default: true,
    },
  },
};
</script>
